@charset "utf-8";

html{
    font-size: 62.5%; 
    text-align: center;
    background-color: #eee;   
    overflow: hidden;
    body{
        margin: 0 auto;
        .app{
            width: 100%;
            height: 100%;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            overflow: hidden;
            &>div{
                width: 100%;
                height: 100%;
                position: relative;
                overflow: hidden;
                transition: 0.5s;
            }
            img{
                vertical-align: top;
                height: 100%;
            }
        }
    }
}

/********************以高度适配********************/
//以微信iPhone5尺寸为模板，设计图640*1038，实际504*320
$fontSize: 20px;        //基础字体大小
$designHeight: 1038px;  //设计图高度
$basisHeight: 504px;    //基础高度

//传入设计图量的高度，设置元素相对根元素的倍数，返回值是rem
@function hre($height) {
    @return $height/$designHeight*$basisHeight/$fontSize*1rem;
}

//设置根元素字体大小，返回值是px
//@function setRootByHeight($height) {
//  @return $fontSize*($height/$basisHeight);
//}

//@media screen and (min-height: 416px) {
//  html { font-size: setRootByHeight(416px); }
//}
//@media screen and (min-height: 460px) {
//  html { font-size: setRootByHeight(460px); }
//}
//@media screen and (min-height: 504px) {
//  html { font-size: setRootByHeight(504px); }
//}
//@media screen and (min-height: 513px) {
//  html { font-size: setRootByHeight(513px); }
//}
//@media screen and (min-height: 518px) {
//  html { font-size: setRootByHeight(518px); }
//}
//@media screen and (min-height: 520px) {
//  html { font-size: setRootByHeight(520px); }
//}
//@media screen and (min-height: 547px) {
//  html { font-size: setRootByHeight(547px); }
//}
//@media screen and (min-height: 559px) {
//  html { font-size: setRootByHeight(559px); }
//}
//@media screen and (min-height: 567px) {
//  html { font-size: setRootByHeight(567px); }
//}
//@media screen and (min-height: 569px) {
//  html { font-size: setRootByHeight(569px); }
//}
//@media screen and (min-height: 570px) {
//  html { font-size: setRootByHeight(570px); }
//}
//@media screen and (min-height: 572px) {
//  html { font-size: setRootByHeight(572px); }
//}
//@media screen and (min-height: 603px) {
//  html { font-size: setRootByHeight(603px); }
//}
//@media screen and (min-height: 672px) {
//  html { font-size: setRootByHeight(672px); }
//}

@function wp($wt){
    @return $wt/640*100%;
}
@function hp($ht){
    @return $ht/1038*100%;
}
@mixin cen{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/********************首页********************/
.homepage{
    background: url(../img/homepage/bg.png) no-repeat center/cover;
    .snow{
        height: hre(65px);
        position: absolute;
        transform: scale(0);
        animation: bulin 4s linear infinite;
        &.snow-one{
            top: hp(165);
            left: wp(55);
        }
        &.snow-two{
            top: hp(300);
            left: wp(120);
            animation-delay: 1s;
        }
        &.snow-three{
            top: hp(490);
            left: wp(30);
            animation-delay: 2s;
        }
        &.snow-four{
            top: hp(270);
            left: wp(520);
            animation-delay: 3s;
        }
    }
    .logo{
        height: hre(65px);
        margin: hre(23px) 0 0 wp(20);
        text-align: left;
    }
    .star{
        height: hre(116px);
        position: relative;
        z-index: 1;
        left: hre(-5px);
        animation-delay: 0.3s;
    }
    .tree{
        height: hre(589px);
        margin-top: hre(-30px);
        animation-delay: 1s;
    }
    .tie{
        height: hre(102px);
        margin-top: hre(50px);
        animation-delay: 1.2s;
    }
    .decorate{
        height: hre(356px);
        margin-top: hre(-340px);
        animation-delay: 1.8s;
    }
    .title1{
        height: hre(115px);
        margin-top: hre(-290px);
        animation-delay: 2s;
    }
    .title2{
        height: hre(135px);
        margin-top: hre(-20px);
        animation-delay: 2.5s;
    }
    .bingo{
        height: hre(56px);
        margin-top: hre(-15px);
        animation-delay: 3s;
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }
    .award{
        width: hre(313px);
        height: hre(313px);
        border-radius: 50%;
        background-color: #56984b;
        margin: hre(18px) auto 0;
        padding-top: hre(15px);
        position: relative;
        z-index: 1;
        animation-delay: 3.5s;
        img{
            display: block;
            height: hre(20px);
            margin: hre(10px) auto 0;
            animation: arrowup 1.5s infinite;
        }
        span{
            display: block;
            font-size: hre(35px);
            line-height: hre(55px);
            color: #fff;
        }
    }
}
@keyframes bulin{
    from { transform: scale(0) rotate(0deg); }
    50%  { transform: scale(1) rotate(180deg); }
    to   { transform: scale(0) rotate(360deg); }
}
@keyframes arrowup{
    to { transform: translateY(hre(-15px)); opacity: 0; }
}
@keyframes tada {
    from               { transform: scale3d(1, 1, 1); }
    5%, 10%            { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
    15%, 25%, 35%, 45% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
    20%, 30%, 40%      { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
    50%                { transform: scale3d(1, 1, 1); }
    to                 { transform: scale3d(1, 1, 1); }
}

/********************抽奖********************/
.lottery{
    .menu{
        height: 20%;
        background: url(../img/award/bg1.png) no-repeat center/cover;
        position: relative;
        i{
            font-size: hre(60px);
            color: #fff;
            border-radius: 50%;
            position: absolute;
            top: hre(20px);
            &.info{ left: hre(20px); }
            &.music{ 
                right: hre(20px); 
                animation: playmusic 5s linear infinite;
            }
            &.icon-disable{ 
                animation: none;
                text-shadow: 0 0 3px #f00,0 0 3px #f00,0 0 3px #f00;
            }
        }
    }
    .main{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        height: 80%;
        transition: 0.5s;
        background: url(../img/award/bg2.png) no-repeat top/cover;
        &>div{
            width: 32.5%;
            height: 32.5%;
            background: no-repeat center/100% 100%;
            border-radius: 5px;
            box-shadow: 0 3px 3px 1px rgba(0,0,0,0.3);
            transform: scale(0);
            transition: transform 1s ease-out;
            position: relative;
            i{
                @include cen;
                border-radius: 5px;
            }
            &.award{
                border: 2px solid #fff;
                i{ background-image: radial-gradient(100% 100%,transparent,rgba(255,255,255,0.6)); }
            }
            &.start div:active, &.bingo{
                border: 2px solid #ff0;
                i{ background-image: radial-gradient(100% 100%,transparent,rgba(255,255,0,0.6)); }
            }
        }
        .start{
            background-image: url(../img/award/startbg.png);
            text-align: center;
            div{
                height: 100%;
                border-radius: 5px;
                position: relative;
                img{
                    height: hre(76px);
                    @include cen;
                    margin: auto;
                    &.awardgo{ animation: start 2s linear infinite; }
                }
            }
            span{
                display: none;
                @include cen;
            }
        }
    }
    .redeem{
        height: 80%;
        background: url(../img/redeem/bg.png) no-repeat center/cover;
        padding: hre(50px) wp(60) 0;
        transform: translate(100%,-100%);
        position: relative;
        z-index: 1;
        transition: 0.5s;
        .step{ transition: 0.5s; }
        .congratu{ 
            height: hre(74px);
            margin-bottom: hre(135px);
        }
        p{
            font-size: hre(24px);
            line-height: hre(40px);
            text-align: justify;
        }
        i{
            display: block;
            font-style: normal;
            text-align: left;
            font-size: hre(36px);
            color: #f08;
            margin: hre(30px) 0;
        }
        input{
            width: 100%;
            height: hre(50px);
            background-color: #eee;
            border: 1px solid #999;
            padding: 0 3px;
            appearance: none;
        }
        .nextstep{ 
            height: hre(127px);
            margin-top: hre(90px); 
        }
        .twocode{ 
            height: hre(220px);
            margin: hre(18px) auto hre(38px);
        }
        .two{
            transform: translate(120%,-100%);
            i{ margin-top: hre(10px); }
            .nextstep{ margin-top: 0; }
        }
    }
    .cong,.goredeem{
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
    }
    .cong{ 
        height: hre(74px);
        top: 33%; 
    }
    .goredeem{ 
        height: hre(127px);
        bottom: 3%; 
        animation-delay: 0.5s;
    }
    .pop{
        background-color: rgba(0,0,0,0.5);
        @include cen;
        z-index: 2;
        .rule{
            transition: 0.4s;
            width: wp(596);
            height: hp(786);
            background: url(../img/award/rulebg.png) no-repeat center/100% 100%;
            text-align: center;
            padding: hre(220px) hre(50px) 0;
            @include cen;
            margin: auto;
            .close{
                height: hre(87px);
                transform: translate(25%,-50%);
                position: absolute;
                top: 0;
                right: 0;
            }
            h3{
                font-size: hre(38px);
                margin-bottom: hre(50px);
            }
            p{
                font-size: hre(24px);
                text-align: justify;
                margin: hre(15px) 0;
            }
            span{
                display: block;
                font-size: hre(20px);
                margin-top: hre(80px);
            }
            .logo{
                height: hre(43px);
                margin-top: hre(40px);
            }
        }
    }
    .tips{
        display: none;
        @include cen;
        margin: auto;
        width: 80%;
        height: hre(100px);
        line-height: hre(100px);
        background-color: rgba(0,0,0,0.6);
        color: #fff;
        font-size: hre(35px);
        border-radius: 10px;
        z-index: 3;
    }
}
@keyframes playmusic{
    to { transform: rotate(360deg); }
}
@keyframes start{
    50%   { transform: scale(1); }
    62.5% { transform: scale(1.3); }
    75%   { transform: scale(1); }
    87.5% { transform: scale(1.3); }
    to    { transform: scale(1); }
}

/********************top兼容********************/
@media screen and (min-height:416px){   //iw4
}
@media screen and (min-height:504px){   //iw5
}
@media screen and (min-height:519px){   //aw640
}
@media screen and (min-height:567px){   //aw640
}
@media screen and (min-height:603px){   //iw6
}
@media screen and (min-height:672px){   //iw6p
}
